<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Insert title here</title>
	<link rel="stylesheet" href='<c:url value="/styles/jquery.mobile-1.2.0.min.css"/>'/>
	<script src='<c:url value="/scripts/jquery-1.8.2.min.js"/>'></script>
	<script src='<c:url value="/scripts/jquery.mobile-1.2.0.min.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.jqueryplugin.js"/>'></script>
	<style type="text/css">
	.center-wrapper{
		text-align: center;
	}
	.ui-page {
		background-image:url(<c:url value='/images/bg.png'/>);
		background-size:cover;  
	}
	</style>
</head>
<body>
<div data-role="page" id="home">  
    <div data-role="header" data-position="fixed">  
        <h1>Jquery Mobile</h1>
    </div>  
    <div data-role="content" id="home_content">  
        <div class="center-wrapper"><h1>Content</h1></div>
		<div class="center-wrapper">
		<h4>
			This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.
			How about some blockquote action with a cite
			This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.
			We add a few styles to tables and fieldsets to make them more legible, which are easily overridden with custom styles.
			This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.
			How about some blockquote action with a cite
			This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.
			We add a few styles to tables and fieldsets to make them more legible, which are easily overridden with custom styles.			
		</h4>
		</div>
    </div>  
    <div data-role="footer" id="other_footer" data-position="fixed">
        <div data-role="navbar" data-iconpos="right">
			<ul>
				<li><a data-icon="arrow-l" class="ui-btn-active ui-state-persist">words</a></li>
				<li id="li-charts"><a data-icon="arrow-r" >charts</a></li>
				<li><a rel="external" href="<c:url value='/pages/user/login_success.jsp'/>" data-icon="home">Menu</a></li>
			</ul>
		</div>
    </div>  
</div>  
<div data-role="page" id="charts">  
    <div data-role="header" id="other_header" data-position="fixed">  
        <h1>Jquery Mobile</h1>
    </div>  
    <div data-role="content" id="other_content">  
        <div class="center-wrapper">
        <div class="center-wrapper"><h1>Content</h1></div>
		<div id="chartContainer">FusionCharts XT will load here!</div>
			<script type="text/javascript">			
				$(document).ready(function () {
					var xmlStr = '<chart baseFontSize="12" baseFont="Arial" decimalSeparator="0" formatNumberScale="0" legendBorderAlpha="0" useRoundEdges="1" yAxisName="次数" xAxisName="用户" caption="系统日志统计" rotateYAxisName="1" showValues="0" palette="2" animation="1"><categories><category label="管理员"/><category label="FJSDXHXY"/><category label="监控中心"/><category label="维护人员"/><category label="师大监控中心"/></categories><dataset showValues="true" color="AFD8F8" seriesName="报警"><set value="68.0"/><set value="50.0"/><set value="70.0"/><set value="45.0"/><set value="23.0"/></dataset><dataset showValues="true" color="8BBA00" seriesName="用户操作"><set value="460.0"/><set value="255.0"/><set value="71.0"/><set value="311.0"/><set value="111.0"/></dataset></chart>';
					$("#chartContainer").insertFusionCharts({
						swfUrl: "MSColumn2D.swf",
						renderer: "javascript",
						dataSource: xmlStr,
						dataFormat: "xml",
						width: "100%",
						height: "400px",
						id: "myChartId"
					});
				});
			</script> 
		</div>
    </div>  
    <div data-role="footer" id="other_footer" data-position="fixed">  
        <div data-role="navbar" data-iconpos="right">
			<ul>
				<li id="li-words">
					<a href="www.baidu.com" rel="external"  data-icon="arrow-l">words</a>
				</li>
				<li>
					<a data-icon="arrow-r" class="ui-btn-active ui-state-persist">charts</a>
				</li>
				<li>
					<a rel="external" href="<c:url value='/pages/user/login_success.jsp'/>" data-icon="home">Home</a>
				</li>
			</ul>
		</div>
    </div>
    <script type="text/javascript">
	    $('#li-charts').click(function(){
	    	$.mobile.changePage($("#charts"), "slide", false, false); 
	     });
    </script> 
</div>  
</body>
</html>